import React, { Component } from 'react';
import {
	View, Text, StyleSheet, TouchableOpacity, Image, TextInput, Alert
} from 'react-native';
import { GLOBAL } from '../../../config/global';
import { Common } from '../../../component/common/Common.js'
import ValidateDataUtil from '../../../utils/ValidateDataUtil';
const addressObj = {
}
import { enterpriseStyles } from '../_common/enterpriseStyle';
import { LargeBtn } from '../../../component/Store.js';
import Dictionary from '../../../utils/dictionary';
const scale = GLOBAL.SCALE;
const arrowLeft = require('../../../imgs/arrow-left.png');
let sendDataholl;

export class ContactEditPage extends Component {

	static navigationOptions = ({ navigation }) => {
		const params = navigation.state.params || {};
		const { vo, addressCodeParam } = params;
		sendDataholl = vo;

		if (addressCodeParam) {
			console.log(addressCodeParam);
			addressObj = addressCodeParam;

			if (params.setAddress) {
				params.setAddress(addressObj);
			}
		}
		return {
			header: null
		}
	};

	async componentWillMount() {
		let contractType = await Dictionary.get("CC_CONTACTOR_ATTACHED");
		this.setState({contractType})
		if(this.sendData.length>0&&this.sendData.attachedFlag){
			this.setState({
				selectIndex:this.sendData.attachedFlag-1
			})
		}
	}

	constructor(props) {
		super(props);
		this.state = {
			addressStr: this.props.navigation.state.params.vo.contactorAddress || '',
			modalObj: {
				currSelectIndex: -1,
				currTitle: '',
				currlistData: [],
				currCb: null,
				currIsVisible: false,
			},
			contractType:[{dictName:'不带入'}],
			selectIndex:0
		}
		this.setAddress = this.setAddress.bind(this);
		this.sendData = this.props.navigation.state.params.vo;
		this.sendDataChange = {};
		this.sendDataChange.index = sendDataholl.index;
		this.sendDataChange.contactorName = sendDataholl.contactorName;
		this.sendDataChange.mobileNo = sendDataholl.mobileNo;
		this.sendDataChange.email = sendDataholl.email;
		this.sendDataChange.contactorDepart = sendDataholl.contactorDepart;
		this.sendDataChange.contactorAddress = sendDataholl.contactorAddress;
		this.sendDataChange.id = sendDataholl.id ? sendDataholl.id : sendDataholl.id;

		this.props.navigation.setParams({
			setAddress: this.setAddress,
			addressCodeParam: this.props.navigation.state.params.addressObj
		});
	}

	openModal (title, listData, index, cb) {
		let { modalObj } = this.state;
		modalObj.currIsVisible = true;
		modalObj.currSelectIndex = index;
		modalObj.currTitle = title;
		modalObj.currlistData = listData;
		modalObj.currCb = cb;
		this.setState({ modalObj }, () => {
		});
	}
	getType = (index) => {
		this.setState({ selectIndex: index}, () => {
			this.closeModal()
		});
	}
	closeModal = () => {
		let { modalObj } = this.state;
		modalObj.currIsVisible = false;
		this.setState({ modalObj });
	}

	render () {
		const { contactorName, mobileNo, contactorDepart, contactorAddress,email } = this.sendData;
		let { addressStr,modalObj,contractType,selectIndex } = this.state;
		if (addressStr && (!addressStr.length)) {
			addressStr = contactorAddress;
		}
		return (
			<View style={styles.container}>
				<View style={styles.wrap}>
					<Common type="headCloes" callBack={() => {
						const { navigate } = this.props.navigation;
						console.log(this.sendDataChange);
						navigate('EnterpriseCreateAdditionInfo', {
							contactData: this.sendDataChange,
						});
					}} imgStyle={{ marginBottom: 14 * scale }} />
					<Text style={enterpriseStyles.titleText}>联系人</Text>

					<View style={enterpriseStyles.field}>
						<Text style={enterpriseStyles.lableText}>姓名(必填)</Text>
						<TextInput
							ref="bonusInput"
							style={enterpriseStyles.textInput}
							underlineColorAndroid='transparent'
							returnKeyType='done'
							keyboardType='default'
							placeholder={"请输入联系人"}
							placeholderTextColor="#404040"
							maxLength={100}
							editable={true}
							defaultValue={contactorName}
							onChangeText={(txt) => {
								this.sendData.contactorName = txt;
							}}
						/>
					</View>

					<View style={enterpriseStyles.field}>
						<Text style={enterpriseStyles.lableText}>联系电话(必填)</Text>
						<TextInput
							ref="mobileNoInput"
							keyboardType="numeric"
							style={enterpriseStyles.textInput}
							underlineColorAndroid='transparent'
							returnKeyType='done'
							placeholder={"请输入联系电话"}
							placeholderTextColor="#404040"
							keyboardType='phone-pad'
							maxLength={11}
							editable={true}
							defaultValue={mobileNo}
							onChangeText={(txt) => {
								if (!/^[0-9]*$/.test(txt)) {
									this.refs.mobileNoInput.clear();
									return;
								}
								this.sendData.mobileNo = txt;
							}}
						/>
					</View>
					<View style={enterpriseStyles.field}>
						<Text style={enterpriseStyles.lableText}>邮箱(选填)</Text>
						<TextInput
							ref="bonusInput"
							style={enterpriseStyles.textInput}
							underlineColorAndroid='transparent'
							returnKeyType='done'
							keyboardType='default'
							placeholder={"请输入邮箱"}
							placeholderTextColor="#404040"
							maxLength={100}
							editable={true}
							defaultValue={email}
							onChangeText={(txt) => {
								this.sendData.email = txt;
							}}
						/>
					</View>
					<View style={enterpriseStyles.field}>
						<Text style={enterpriseStyles.lableText}>部门(选填)</Text>
						<TextInput
							ref="bonusInput"
							style={enterpriseStyles.textInput}
							underlineColorAndroid='transparent'
							returnKeyType='done'
							keyboardType='default'
							placeholder={"请输入部门"}
							placeholderTextColor="#404040"
							maxLength={100}
							editable={true}
							defaultValue={contactorDepart}
							onChangeText={(txt) => {
								this.sendData.contactorDepart = txt;
							}}
						/>
					</View>

					<View style={enterpriseStyles.field}>
						<Text style={enterpriseStyles.lableText}>地址(选填)</Text>
						<View style={enterpriseStyles.textInputView}>
							<TextInput
								ref="detailAddress"
								style={[enterpriseStyles.textInput, { flex: 1, flexWrap: 'wrap' }]}
								underlineColorAndroid='transparent'
								returnKeyType='done'
								keyboardType='default'
								placeholder={"请输入地址"}
								placeholderTextColor="#404040"
								editable={true}
								defaultValue={addressStr}
								onChangeText={(txt) => {
									this.sendData.contactorAddress = txt;
								}}
							/>
							{
								this.props.navigation.state.params.countryCode &&
									this.props.navigation.state.params.countryCode === '86' ?
									<TouchableOpacity activeOpacity={.5} style={enterpriseStyles.textInputIcon} onPress={() => {
										const { navigate } = this.props.navigation;
										navigate('AddressOptionPage', {
											addressObj,
											goBackPage: 'ContactEditPage'
										});
									}} activeOpacity={0.5}>
										<Image source={arrowLeft} style={enterpriseStyles.arrowLeft} />
									</TouchableOpacity>
									: null
							}
						</View>
					</View>
					<View style={enterpriseStyles.field}>
						<Text style={enterpriseStyles.lableText}>合同使用</Text>
						<TouchableOpacity style={{marginTop:12 * scale,marginBottom:13 * scale}} 
							onPress={() => {
								this.openModal('请选择合同使用类型', contractType, selectIndex, this.getType)
							}}
						>
							<Text style={{fontSize: 13 * scale,color: '#404040'}}>{contractType[selectIndex].dictName}</Text>
						</TouchableOpacity>
					</View>
				</View>
				<LargeBtn text={'保存'} onPress={() => {
					this.saveContactor();
				}} />
				<Common type="modal" demoData={(
					<Common type="listRadio" selectIndex={modalObj.currSelectIndex} title={modalObj.currTitle} listData={modalObj.currlistData || []} selectCallBack={modalObj.currCb} />
				)} isVisible={modalObj.currIsVisible} closeCallballFn={this.closeModal} />
			</View>
		);
	}

	setAddress (addressObj) {
		let { address, poiInfo } = addressObj;

		if (!poiInfo) {
			poiInfo = '';
		}

		addressObj.detailAddress = address;

		if (this.sendData.companyInfoVO && this.sendData.companyInfoVO.linkPhone) {
			addressObj.mobileNo = this.sendData.mobileNo
		}

		const addressStr = address + ' ' + poiInfo;
		this.sendData.contactorAddress = addressStr;

		this.setState({
			addressStr
		});
	}

	saveContactor () {
		const { navigate } = this.props.navigation;
		const { contactorName, mobileNo,email } = this.sendData;
		if (ValidateDataUtil.isEmpty(contactorName)) {
			Alert.alert('请填写联系人姓名');
			return;
		}
		if (ValidateDataUtil.isEmpty(mobileNo)) {
			Alert.alert('请填写联系人电话');
			return;
		} 
		else {
			if (!ValidateDataUtil.isPhone(mobileNo)) {
				Alert.alert('请输入正确手机号格式');
				return;
			}
		}
		// if(ValidateDataUtil.isEmpty(email)){
		// 	Alert.alert('请填写联系人邮箱');
		// 	return;
		// }
		// else{
		// 	if(!ValidateDataUtil.isEmail(email)){
		// 		Alert.alert('请输入正确邮箱格式');
		// 		return;
		// 	}
		// }
		this.sendData.attachedFlag = this.state.selectIndex+1;
		console.log(this.sendData)
		navigate('EnterpriseCreateAdditionInfo', {
			contactData: this.sendData,
			addressObj,
		});
	}

}

const styles = StyleSheet.create({
	container: {
		flex: 1,
		alignItems: 'center',
		backgroundColor: '#fff',
	},
	wrap: {
		height: GLOBAL.SCREEN_HEIGHT - 120,
		width: 345 * scale,
	},
	closeText: {
		fontSize: 36 * scale,
		color: '#000'
	},
	closeTextCell: {
		position: 'absolute',
		left: 8,
		top: 0,
	},
	textInputView: {
		alignItems: 'center',
		justifyContent: 'space-between',
		flexDirection: 'row',
		flexWrap: 'wrap'
	},
	textInputIcon: {
		alignItems: 'center',
		justifyContent: 'flex-end',
		flexDirection: 'row',
		height: 42 * scale,
		width: 42 * scale,
	},
})